<template>
  <draggable class="specialCate-container" draggable=".item" :group="{ name: 'cc', pull: 'clone', put: false }">
    <div v-for="(item, index) in dlist" :key="index">
      <draggable :list="item.children" @change="listChange" class="list-group" draggable=".item" group="aa">
        <el-row :gutter="24">
          <el-col :span="6">
            <div class="tableft" :class="ite.name == currentTab ? 'cateactive' : 'catearr'" v-for="(ite, inde) in item.children" :key="inde">
              <img v-if="ite.icon" :src="ite.icon" alt="">
              <img v-else src="../../assets/images/tabicon.png" alt="">
              <p @click="changeTab(ite)">{{ ite.title }}</p>
            </div>
          </el-col>
          <el-col :span="18" v-for="(it, ind) in item.children" :key="ind">
            <el-tabs v-model="activeName" v-if="it.name == currentTab" type="card">
              <el-tab-pane
                v-for="(subitem, subindex) in it.list"
                :key="subindex"
                :label="subitem.text"
                :name="subitem.name">
                <draggable
                  :list="subitem.list"
                  @change="listChange"
                  class="list-sub-group"
                  draggable=".item"
                  group="aa">
                  <slot class="item" name="item" v-bind="subitem.list"></slot>
                </draggable>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </draggable>
    </div>
  </draggable>
</template>
  
<script>
import draggable from "vuedraggable";
import componentProperties from "@/utils/componentProperties";
export default {
  name: "specialContainer",
  components: {
    draggable,
  },
  data() {
    return {
      dlist: [],
      tabs: [
        // {
        //   text: "学科标题",
        //   type: "container",
        //   name: "subject",
        // },
      ],
      activeName: "subject",
      currentTab: 'specialTab',
      disabled: false
    };
  },
  props: {
    splist: {
      type: Array,
      default: () => {
        return [];
      },
    },
    datas: {
      type: Array,
    },
  },
  watch: {
    splist: {
      handler(val) {
        console.log('splist------------sssss', this.splist);
        if (val.length > 0) {
          // this.disabled = true;
          this.dlist = val;
        } else {
          this.createDatas();
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    activeContainer(m, index) {
      m.active = true;
      this.dlist.forEach((res) => {
        if (res.group !== m.group) {
          res.active = false;
        }
      });
    },
    // 编辑右侧选项卡
    updatedEditView (number) {
      const tabs = this.datas[0].setStyle.specialTabs[number].tabs;
      this.dlist.forEach(res => {
        res.children.map(resu => {
          this.recursiveTraverse(resu, (re, ii) => {
            if (re.name) {
              const el = tabs.find(item => item.name === re.name);
              if (el) {
                re.text = el.text;
              }
            }
          })
        })
      });
      this.$emit("update:list", this.dlist);
    },
    // 新增右侧选项卡
    updatedAddView (number) {
      const tabs = this.datas[0].setStyle.specialTabs[0].tabs, num = number.inputNumber, index = number.index;
      const json = {
        list: [],
        text: "学科标题",
        type: "container",
        name: "subject" + (num - 1),
        group: tabs.length + 1,
      };
      this.dlist[0].children[index].list.push(json)
      this.$emit("update:list", this.dlist);
    },
    // 删除右侧选项卡
    updatedDeleteView (deletobj) {
      const index = deletobj.index, ind = deletobj.ind;
      this.dlist[0].children[index].list.splice(ind, 1);
    },
    // 新增左侧选项卡
    updatedSpecialAddView (number) {
      const json = {
        title: '同步学习',
        name: 'specialTab' + (number - 1),
        tabs: [],
        icon: '',
        abstract: {
          component: "specialContainerTab",
          text: "专项容器组件",
          style: "recoment_tab_style1",
          setStyle: {},
          ratio: "1.00"
        }
      }
      this.dlist[0].children.push(json);
      const container = [];
      this.tabs.forEach((item, index) => {
        const json = {
          list: [],
          ...item,
          group: index,
        };
        container.push(json);
      });
      this.dlist[0].children.map(item => {
        if (!item.list) {
          item.list = container;
        }
      })
    },
    // 编辑左侧选项卡
    updatedSpecEditView() {
      const specialTabs = this.datas[0].setStyle.specialTabs;
      this.dlist.forEach(res => {
        res.children.map(resu => {
          this.recursiveTraverse(resu, (re, ii) => {
            if (re.name && re.name != "subject") {
              const el = specialTabs.find(item => item.name === re.name);
              if (el) {
                re.title = el.title;
              }
            }
          })
        })
      });
      this.$emit("update:list", this.dlist);
    },
    // 删除左侧选项卡
    updatedDeleteList(index) {
      this.dlist[0].children.splice(index,1);
      this.$emit("update:list", this.dlist);
    },
    // 上传左侧选项卡图标
    uploadInformation(imgObj) {
      // console.log(imgObj, 'dddddd');
      this.dlist[0].children[imgObj.index].icon = imgObj.url;
      this.$emit("update:list", this.dlist);
    },
    listChange(val) {
      this.dlist.forEach((res) => {
        this.recursiveTraverse(res, (re, ii) => {
          if (re && re.active === true) {
            re.active = false;
          }
        });
      });
      if (val.added) {
        // val.added.element.active = true;
        // this.$forceUpdate();
        const comp = val.added.element;
        comp.icon = undefined;
        comp.setStyle = JSON.parse(
          JSON.stringify(componentProperties.get(comp.name).setStyle)
        );
        this.$emit("activeCom", val.added.element);
      }
      this.$emit("update:list", this.dlist);
    },
    changeTab(ite) {
      this.currentTab = ite.name;
    },
    recursiveTraverse(node, action) {
      action(node);
      if (!node || !node.list || node.list.length === 0) {
        return;
      }
      node.list.forEach((item) => {
        this.recursiveTraverse(item, action);
      });
    },
    createDatas() {
      this.dlist = [
        {
          text: "专项容器",
          type: "containers",
          direction: "0",
          children: [
            {
              title: '同步学习',
              name: 'specialTab',
              tabs: [],
              icon: '',
              abstract: {
                component: "specialContainerTab",
                text: "专项容器组件",
                style: "recoment_tab_style1",
                setStyle: {},
                ratio: "1.00"
              }
            }
          ],
          active: true,
          //setStyle: {}
          group: 0
        },
      ];
      const container = [];
      this.tabs.forEach((item, index) => {
        const json = {
          list: [],
          ...item,
          group: index,
        };
        container.push(json);
      });
      this.dlist[0].children[0].list = container;
      this.$emit("update:list", this.dlist);
    }
  }
};
</script>
  
<style scoped lang="scss">
.specialCate-container,
.list-group-c {
  height: 100%;
}
.catearr{
  border-radius: 12px;
  width: 200px;
  height: 90px;
  line-height: 90px;
  margin: 30px 0;
  background: url('../../assets/images/zxbg01.png') no-repeat center;
  background-size: 100% 100%;
}
.cateactive{
  background: url('../../assets/images/zxbg02.png') no-repeat center;
  // background-size: 100% 100%;
  border-radius: 12px;
  width: 200px;
  height: 90px;
  line-height: 90px;
  margin: 30px 0;
}
.specialCate-container {
  .list-group {
    color: white;
    border: 1px salmon solid;
    text-align: center;
    height: 100%;
    cursor: pointer;
    min-height: 800px;
    border-radius: 14px;
    .tableft{
      display: flex;
      align-items: center;
      text-align: center;
      // padding-left: 10px;
      img{
        width: 50px;
        height: 50px;
        margin-right: 10px;
      }
      p{
        font-size: 24px;
      }
    }
  }
  .list-sub-group {
    height: 100%;
    cursor: pointer;
    // border: 1px rgb(167, 224, 22) solid;
    min-height: calc(100vh - 100px);
    border-radius: 14px;
  }
}
</style>
<style lang="scss">
.specialCate-container{
  .el-row {
    height: 100% !important;
    margin: 0 !important;
  }

  .el-col {
    height: 100%;
  }
  .el-tabs__header {
    margin: 0;
  }

  .el-tabs__item {
    height: auto;
    // writing-mode: tb-rl;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__nav{
    border: none;
    margin-bottom: 20px;
  }
  .el-tabs--card>.el-tabs__header{
    border-bottom: none;
  }

  .el-tabs__item {
    height: 43px;
    background: #2533A2;
    border-radius: 42px;
    font-weight: 600;
    font-size: 14px;
    color: #FFFFFF;
    margin-right: 10px;
    margin-top: 10px;
  }

  .el-tabs__item.is-active {
    background: url('../../assets/images/zxbg03.png') no-repeat center;
    background-size: 100% 100%;
  }
}
</style>
  